<template>
  <div class="page-operate">
    <!-- 位置模块 -->
    <HeadTop></HeadTop>
    <div class="page-head">
      <span class="operate-text">{{title}}</span>
      <div class="operate-box">
        <button @click="back()">关闭</button>
      </div>
    </div>
    <div class="content-area task-content">
      <div class="task-detail">
        <div class="tab-content">
          <div class="content1 detail-content">
            <table border="1" bordercolor='#EEE'>
              <tr>
                <td>计划维保时间</td>
                <td v-text="resForm.planDate"></td>
                <td>维保类型</td>
                <td v-text="resForm.maintainTypeName"></td>
              </tr>
            </table>
          </div>
          <div class="page-form add-plain">
            <div class="item-title">
              <span>维保项目</span>
            </div>
            <el-form class="my-form check-form check-detail" :inline="true" disabled>
              <el-tree :data="itemList" class="tree hidden" show-checkbox default-expand-all node-key="id" ref="tree"
                       highlight-current :props="defaultProps">
              </el-tree>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" type="text/scss">
  @import '../../../../style/entry/components/pageChildCommon';
  @import '../../../../style/entry/components/tabDetail';
  @import '../../../../style/entry/page/taskAdd';
</style>
<script>
  import moment from 'moment'  // 时间格式转化
  import {maintainTaskDetail} from '@/api/getData'
  import HeadTop from "../../../../components/head-top/head-top"

  export default {
    name: 'taskDetail',
    components: {
      HeadTop
    },
    data() {
      return {
        title: '查看维保计划',
        plainTaskId: '',
        maintainTypeIds: '',
        itemList: [], // 折叠维保项目区域所需数据
        defaultProps: {
          children: 'itemList',
          label: 'item'
        },
        resForm: {
          planDate: '',
          areaCode: '',
          eleTypeName: '',
          useTime: '',
          brief: '',
          maintainTypeName: '',
          maintainTypeId: '',
          areaText: ''
        },
      }
    },

    // 判断操作为添加/查看详情
    created() {
      this.plainTaskId = this.$route.query.id;
      this.type = this.$route.query.type;
      // 为详情页时记录数据回显
      this.getPalinDetailData();
    },

    methods: {
      // 详情页时维保计划生成任务记录数据回显
      getPalinDetailData() {
        maintainTaskDetail({id: this.plainTaskId}).then((data) => {
          let res = data.data.data;
          res.planDate = res.planDate ? moment.unix(res.planDate / 1000).format('YYYY-MM-DD') : res.planDate  // 时间
          // res.useTime = res.useTime === '0' ? '五年以内' : (res.useTime === '1' ? '五年以上' : res.useTime);
          this.resForm = res;
          this.itemList = res.typeList;
          // // 获取当前页面所需维保项目数据
          // this.getItemsData(res.maintainTypeId);
          // this.relationCheck(res.maintainTypeId);
          // if (res.areaCode) this.getAreaText(res.areaCode)
        }).catch((err) => {
          this.$message.error('获取详情信息失败')
        })
      },

      // 选择维保类型下拉框时 维保项同步勾选
      relationCheck(val) {
        this.maintainTypeIds = [];
        for (let i = 1; i <= val; i++) {
          this.maintainTypeIds[i - 1] = i + 10000;
        }
        this.$refs.tree.setCheckedKeys(this.maintainTypeIds);
      },

      // 返回上一级
      back() {
        this.$router.go(-1);
      },
    },
  }
</script>
